<%--
  Created by IntelliJ IDEA.
  User: qingx
  Date: 2018/12/27
  Time: 22:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jsp文件头和头部 -->
    <%@ include file="../base/top.jsp"%>
    <link rel="stylesheet" href="static/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <style>
        #stu span{
             height:10px;
             width: 100px;
             margin-left: 10px;
             border-radius:5px;
        }
        #stu i{
            position:absolute;
            margin-top: -7px;
            margin-left: -5px;
        }
        #stu label{
            position:absolute;
            margin-top: -10px;
        }
    </style>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">

                        <form class="form-horizontal" role="form" style="margin-top: 20px;">

                            <table id="table_report" class="table table-striped table-bordered table-hover">
                                <input type="text" name="success" id="success" style="display: none"/>
                                <input type="text" name="msg" id="msg" style="display: none"/>
                                <tr>
                                    <td style="width:15%;text-align: center;padding-top: 13px;"><label>项目名称:</label></td>
                                    <td><input type="text" maxlength="20" id="project-name" style="width:100%;"/></td>
                                </tr>
                                <tr>
                                    <td style="width:15%;text-align: center;padding-top: 13px;"><label>所属授课:</label></td>
                                    <td>
                                        <select class="chosen-select form-control" id="teach-course" data-placeholder="Choose a State...">
                                            <option value=""></option>
                                            <c:forEach items="${teachCourseInfos}" var="teachCourseInfo" varStatus="status">
                                                <option value="${teachCourseInfo.teachCourseId}">${teachCourseInfo.teachCourseName}</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:15%;text-align: center;padding-top: 13px;"><label>指导老师:</label></td>
                                    <td>
                                        <select class="chosen-select form-control" id="teacher" data-placeholder="Choose a State...">
                                            <option value=""></option>
                                            <c:forEach items="${teacherInfos}" var="teacherInfo" varStatus="status">
                                                <option value="${teacherInfo.teaId}">${teacherInfo.teaName}</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:15%;text-align: center;padding-top: 13px;">
                                        <label>
                                            项目成员:
                                            <br>
                                            ps:第一个学生为组长
                                        </label>
                                    </td>
                                    <td>
                                        <div class="form-control" id="teammates" style="height: 200px;overflow: auto;position:relative" placeholder="所选的第一个学生为组长...">
                                            <div id="stu" style="border:1px solid #000;height: 130px;margin-top: 10px;"></div>
                                            <div style="position:absolute;bottom:10px;left: 30px">
                                                <label>学号：</label>
                                                <input id="stu-id">
                                                &nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-search" aria-hidden="true" onclick="searchStu()"></span>
                                                &nbsp;&nbsp;
                                                <label>姓名：</label>
                                                <label id="name"></label>
                                                <label id="id" style="display: none"></label>
                                                &nbsp;&nbsp;
                                                <button type="button" style="background-color: #e7e7e7; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.1);" onclick="certain()">确认添加</button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td style="text-align: center; " colspan="10">
                                        <button class="btn btn-info" type="button" onclick="addProject()">
                                            Submit
                                        </button>
                                        &nbsp; &nbsp; &nbsp;
                                        <button class="btn" type="reset">
                                            Reset
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </form>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->
<!-- basic scripts -->
<%@ include file="../base/foot.jsp"%>

<script type="text/javascript">
//    $(top.hangge());

    $(function () {
        //下拉框
        if(!ace.vars['touch']) {
            $('.chosen-select').chosen({allow_single_deselect:true});
            $(window)
                .off('resize.chosen')
                .on('resize.chosen', function() {
                    $('.chosen-select').each(function() {
                        var $this = $(this);
                        $this.next().css({'width': $this.parent().width()});
                    });
                }).trigger('resize.chosen');
            $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
                if(event_name != 'sidebar_collapsed') return;
                $('.chosen-select').each(function() {
                    var $this = $(this);
                    $this.next().css({'width': $this.parent().width()});
                });
            });
            $('#chosen-multiple-style .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
                else $('#form-field-select-4').removeClass('tag-input-style');
            });
        }
    });

    function searchStu(){
        var data = {
            stuId: $("#stu-id").val(),
            teachCourseId: $("#teach-course").val()
        }
        console.log(data);
        $.ajax({
            type: "POST",
            url: "<%=basePath%>student/searchStudent",
            data: data,
            dataType:"json",
            async:false,
            success: function(data){
                if(data["success"]==true){
                    $("#name").html(data["data"].stuName);
                    $("#id").html(data["data"].stuId);
                }else{
                    prompt_alert('error',data["msg"],0);
                }
            },
            error:function(msg){
                prompt_alert('error',"失败！",0);
            }
        });
    }

    function certain(){
        var name= $("#name").text();
        var id= $("#id").text();
        console.log(name);
        if(name != null && name !=""){
            $("#stu").append(' <span class="pull-left alert alert-success alert-dismissable">' +
                '<button type="button" class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"/></button><label>'
                +name+'</label><label name="ids" style="display: none">'+id+'</label></span>');
            $("#name").html("");
        }
    }

    function addProject(){
        if(checkFormats()){
            var stuIds = [];
            var obj = document.getElementsByName("ids");
            for(var i=0;i<obj.length;i++){
                stuIds.push(obj[i].innerText.trim());
            }
            var data = {
                projectName:$("#project-name").val(),
                teaId:$("#teacher").val(),
                teachCourseId:$("#teach-course").val(),
                stuIds:stuIds
            }
            console.log(data);
            $.ajax({
                url : "<%=basePath%>project/addProjectInfo",
                type : "post",
                dataType : "json",
                data : data,
                success:function (data) {
                    if(data["success"]==true){
                        $("#success").val(data["success"]);
                        $("#msg").val(data["msg"]);
                        //关闭一定要写在ajax执行完成之后
                        top.Dialog.close();
                    }else{
                        prompt_alert('error',data["msg"],0);
                    }
                },
                error:function(msg){
                    prompt_alert('error',"录入失败！",0);
                }
            });
        }
    }

    //数据校验
    function checkFormats() {
        if($("#project-name").val() == "") {
            prompt_alert('warning',"项目名称不得为空",0);
            return false;
        }
        if($("#teach-course").val() == "") {
            prompt_alert('warning',"授课信息不得为空",0);
            return false;
        }
        if($("#teacher").val() == "") {
            prompt_alert('warning',"教师姓名不得为空",0);
            return false;
        }
        return true;
    }
</script>
</body>
</html>
